<template>
    <el-card style="margin-bottom: 10px;width: 90%;">
        <div style="display: flex;justify-content: space-between;align-items: center;">
            <h1 style="margin: 0;font-size: 24px;">SeedMsg|通用信息推送服务</h1>
            <span style="font-size: 14px;">服务状态：<span :style="`color: ${status ? 'green' : 'red'};`">{{ status ?
                '已连接' : '未连接'
                    }}</span></span>
        </div>
    </el-card>
    <el-card style="margin-bottom: 10px;width: 90%;">
        <div style="margin: 10px 0;display: flex;justify-content: right;">
            <el-button type="primary" @click="useRouter().push('/')" :disabled="!status">返回</el-button>
            <el-button type="primary" @click="addDialogVisible = true" :disabled="!status">新增</el-button>
        </div>
        <div>
            <el-table :data="variable_list" style="width: 100%" border stripe>
                <el-table-column prop="id" label="Id" width="100" align="center" />
                <el-table-column prop="name" label="变量名称" width="240" align="center" />
                <el-table-column prop="content" label="获取地址" align="center" />
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button size="small" color="#a77730" @click="execute(scope.row)"
                            :disabled="!status">调用</el-button>
                        <el-button size="small" color="#b25252" @click="deleteVariableHandle(scope.row)"
                            :disabled="!status">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
    <el-dialog v-model="addDialogVisible" draggable title="新增变量" :before-close="addDialogClose">
        <div>
            <el-form :model="variable_form" :rules="variable_form_rules" label-width="auto" ref="add_variable_form_ref">
                <el-form-item label="变量名称" prop="name">
                    <el-input v-model="variable_form.name" />
                </el-form-item>
                <el-form-item label="获取地址" prop="content">
                    <el-input v-model="variable_form.content" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div>
                <el-button @click="addDialogClose">取消</el-button>
                <el-button type="primary" @click="addVariableHandle">添加</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="deleteDialogVisible" draggable title="删除变量" :before-close="deleteDialogClose">
        <div>
            是否删除变量：{{ delete_variable_form.name }}
        </div>
        <template #footer>
            <div>
                <el-button @click="deleteDialogClose">取消</el-button>
                <el-button type="danger" @click="deleteVariable">删除</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="executeDialogVisible" draggable title="调用结果" :before-close="executeDialogClose">
        <div v-loading="loading">
            <pre><code>{{ execute_result.trim() }}</code></pre>
        </div>
        <template #footer>
            <div>
                <el-button @click="executeDialogClose">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup>
const { connect, disconnect, status, emit, on, off } = useSocket()
// 初始化连接
onMounted(() => {
    connect()
    setupEventListeners()
})

// 清理事件监听
onUnmounted(() => {
    off('getVariableList')
    off('addVariable')
    off('deleteVariable')
    off('execute')
    disconnect()
})

const setupEventListeners = () => {
    emit('getVariableList')
    on('getVariableList', (list) => variable_list.value = list)
    on('addVariable', handleAddVariable)
    on('deleteVariable', handleDeleteVariable)
    on('execute', handleExecute)
}

const handleAddVariable = (data: any) => {
    ElMessage({ message: data.message, type: data.type, showClose: true })
    emit('getVariableList')
}

const handleDeleteVariable = (data: any) => {
    ElMessage({ message: data.message, type: data.type, showClose: true })
    emit('getVariableList')
}

const loading = ref(false)

const handleExecute = (data: any) => {
    execute_result.value = data
    loading.value = false
}

const variable_list = ref([])

const add_variable_form_ref = ref()

const variable_form = ref({
    name: '',
    content: ''
})

const variable_form_rules = ref({
    name: [{ required: true, message: '请输入变量名称', trigger: 'blur' },],
    content: [{ required: true, message: '请输入获取地址', trigger: 'blur' },],
})

const addDialogVisible = ref(false)

const addDialogClose = () => {
    addDialogVisible.value = false
    add_variable_form_ref.value.resetFields()
}

const addVariableHandle = () => {
    add_variable_form_ref.value.validate((valid: boolean) => {
        if (valid) {
            emit('addVariable', variable_form.value)
            addDialogClose()
        }
    })
}

const executeDialogVisible = ref(false)

const executeDialogClose = () => {
    executeDialogVisible.value = false
    execute_result.value = ''
}

const execute_result = ref('')

const execute = (row: any) => {
    loading.value = true
    executeDialogVisible.value = true
    emit('execute', row.content)
}

const deleteDialogVisible = ref(false)

const delete_variable_form = ref({
    id: '',
    name: '',
})

const deleteDialogClose = () => {
    deleteDialogVisible.value = false
}

const deleteVariableHandle = (row: any) => {
    delete_variable_form.value.id = row.id
    delete_variable_form.value.name = row.name
    deleteDialogVisible.value = true
}

const deleteVariable = () => {
    emit('deleteVariable', delete_variable_form.value)
    deleteDialogClose()
}
</script>